Step over the square!

 
Move over to change image

Descrizione del problema

Si scriva il codice javascript necessario ad implementare la seguente funzionalità in una pagina HTML: Entrando in una cella di una tabella identificata dall’id “imgbox”, si cambia l’immagine mostrata sullo sfondo scorrendo circolarmente un vettore che contiene i nomi delle immagini disponibili (l’immagine sullo sfondo è definita dalla proprietà di stile background-image a cui si associa come valore l’url del file immagine – es. background-image: url('img.jpg')).

Implementazione

Alla casella della tabella identificata dall'attributo id con valore imgBox viene associato un gestore per l'evento onmouseover. L'associazione è eseguita dalla funzione setHandlers() che viene chiamata al verificarsi dell'evento onload della pagina HTML (ovvero si esegue alla fine del caricamento del BODY della pagina in modo da essere sicuri che tutti gli elementi del DOM della pagina siano stati già allocati).

La funzione setHandlers() ottiene il riferimento alla cella con la funzione document.getElementById("imgBox") e assegna all'attributo onmouseover il riferimento alla funzione di gestione dell'evento changeImage(). Inoltre provvede ad inizializzare l'attributo imgId che memorizza l'indice dell'immagine corrente e la proprietà di stile background-image che contiene l'url dell'immagine da visualizzare sullo sfondo.

Il gestore dell'evento changeImage(event) estrae dall'oggetto event il riferimento all'elemento (cella della griglia) in cui si è verificato (event.target) e legge e incrementa l'attributo imgId verificando se ha superato la fine dell'array (nel caso viene reinizializzato a 0 per puntare al primo elemento dell'array). Infine, viene aggiornato il valore della proprietà backgroundImage dell'attributo style con l'url della nuova immagine da visualizzare.